<template>
    <div class="detail">
        <div class="header">
            <div class="toolbar">
                <div class="btnBack" @click="$router.back()"><i class="fa fa-reply"></i></div>
                <div class="title">{{dicts.deviceInfo.deviceName}}</div>
                <div class="btnBack" style="width:70px" @click="refresh"><i class="fa fa-refresh"></i> 刷新</div>
            </div>
        </div>
        <div class="body">
            <div class="real">
                <div class="item">
                    <div class="value"><span class="temperature">{{realInfo.value}}</span><span class="unit">℃</span></div>
                    <div class="lab">温度</div>
                </div> 
                <div class="item">
                    <div class="value"><span class="time">{{realInfo.dt}}</span></div>
                    <div class="lab">时间</div>
                </div> 
                <div class="item">
                    <div class="value"><span :class="'warn ws'+realInfo.warn.ws">{{realInfo.warn.label}}</span></div>
                    <div class="lab">状态</div>
                </div> 
            </div>
            <div class="filter">
                <div class="cate">
                    <ul class="lstCate">
                        <li
                            v-for="(item,ind) in dicts.cates" :key="ind"
                            :class="ind==pageState.cateIndex?'active':''"
                            @click="pageState.cateIndex=ind; refresh();"
                        >
                            <i :class="item.icon"></i> {{item.label}}
                        </li>
                    </ul>
                </div>
                <div class="date">
                    <div class="btnnav" @click="addDate(-1)"><i class="fa fa-hand-o-left"></i></div>
                    <div class="dt">                        
                        <el-date-picker @change="pickDate" style="width:120px" v-model="currentDate" type="date" :clearable="false" placeholder="选择日期"></el-date-picker>
                    </div>
                    <div class="btnnav" @click="addDate(1)"><i class="fa fa-hand-o-right"></i></div>
                </div>
            </div>
            <div class="chart" id="chart"></div>
            <div class="tab">
                <table style="width:100%" class="dataTable">
                    <tr>
                        <th class="colTime">时间</th>
                        <th class="colName">{{pageState.cateIndex==0?'温度':'湿度'}}</th>
                        <th class="colName">单位</th>
                    </tr>
                    <tbody>
                        <tr
                            v-for = "(item,ind) in values" :key="ind"
                        >
                            <td class="colTime">{{item.tm}}</td>
                            <td class="colName">{{item.v}}</td>
                            <td class="colName">{{item.unit}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    import {admin} from '../../admin';
    import {moApp} from './moapp.js';
    export default {
        mounted(){
            var me = this;
            try {
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.chart = me.$echarts.init(document.getElementById('chart'))
                    me.refresh();
                })
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return{ 
                pageState:{ 
                    timestamp:( new Date()).getTime()+8*3600,
                    cateIndex:0
                },
                pageStateKey : "zn_admin_mo_detail",
                dicts:{
                    cates:[
                        {code:"t" , label:"温度" ,icon:"fa fa-sort-amount-asc"} ,
                        {code:"h" , label:"湿度" ,icon:"fa fa-tint"} ,
                    ],
                    deviceInfo:{}
                },
                currentDate : new Date(( new Date()).getTime()+8*3600),
                realInfo:{
                    status: 0,
                    t: 0,
                    dt: "",
                    v: 0,
                    value: "",
                    warn:{
                        ws:0,
                        label:""
                    }
                },
                values:[] ,
                chart : null
                
            }

        },
        methods:{
            init(){
                var me = this;
                return new Promise((su,fa)=>{
                    try {
                        me.pageState = admin.api.getSessionObj( me.pageStateKey , me.pageState); 
                        me.currentDate = new Date(me.pageState.timestamp);
                        moApp.getDeviceInfo( me.$route.query.deviceId).then(_res=>{
                            me.dicts.deviceInfo = _res;
                            console.log(me.dicts)
                            su();
                        })
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            refresh(){
                var me = this;
                try { 
                    admin.api.setSessionObj( me.pageStateKey , me.pageState); 
                    me.currentDate = new Date( me.pageState.timestamp);
                    var dateStr = me.currentDate.Format("yyyyMMdd");
                    var idKey = me.pageState.cateIndex==0?'tId':'hId';
                    var varId = parseInt(me.$route.query[idKey]);
                    var tId = parseInt(me.$route.query.tId);
                    moApp.getRealInfo(tId,60).then(_realRes=>{
                        console.log(_realRes); 
                        me.realInfo = _realRes;
                        return moApp.getVarDayValues(varId , dateStr);
                    }).then(_res=>{
                        console.log(_res);
                        me.values = _res.map(r=>{
                            var tm = "";
                            try{
                                tm = ((r.ts.split(" "))[1]).substring(0,5)
                            }
                            catch(err){
                                console.lo(err)
                            }
                            return {
                                v: r.v ,
                                dt: r.ts,
                                tm: tm,
                                unit: me.pageState.cateIndex==0?'℃':'%',
                                utc:r.t
                            }
                        });
                        me.draw();
                    })
                } catch (error) {
                    console.log(error)
                }
            },
            pickDate(  ){
                var me = this;
                try {                     
                    me.pageState.timestamp = me.currentDate.getTime();  
                    me.refresh();
                } catch (error) {
                    console.log(error)
                }
            },
            addDate( duration ){
                var me = this;
                try { 
                    me.pageState.timestamp = me.pageState.timestamp  + duration *24 *3600*1000;  
                    me.refresh();
                } catch (error) {
                    console.log(error)
                }
            },
            draw(){
                var me = this;
                try {
                    let base = +new Date(1988, 9, 3);
                    let oneDay = 24 * 3600 * 1000;
                    let data = [[base, Math.random() * 300]];
                    for (let i = 1; i < 20000; i++) {
                    let now = new Date((base += oneDay));
                    data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
                    }
                    console.log(data)


                    var dateStr = me.currentDate.Format("yyyy-MM-dd");
                    var cate = me.pageState.cateIndex==0?'温度':'湿度';
                    var unit = me.pageState.cateIndex==0?'℃':'%';
                    var info ={
                        title: dateStr+' '+ cate +'曲线 ('+unit+')',
                        subTitle:"",
                        seriesName:"曲线图"
                    };
                    var tms = me.values.map(item=>{
                        return  item.utc.getTime() ;
                    })
                    var values = me.values.map(item=>{
                        return [
                            item.utc.getTime() ,
                            item.v
                        ];
                    })
                    var options = {
                        title: {
                            text: info.title, 
                        },
                        xAxis: {
                            type: 'time',
                            boundaryGap: false,
                            // prettier-ignore
                            //data: tms , 
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}'
                            },
                            axisPointer: {
                                snap: true
                            }
                        },
                        series:[
                            {
                                name:info.seriesName ,
                                type:"line",
                                smooth: true,
                                data: values
                            }
                        ]
                    };
                    console.log(options)
                    me.chart.setOption(options);
                } catch (error) {
                    console.log(error)
                }
            },
            getCurrentDate(){
                return ( new Date(me.pageState.timestamp)).Format("yyyy-MM-dd")
            } 
        }
        
    }
</script>

<style lang="less" scoped>
    .detail{
        .header{
            z-index: 9999;
            position: fixed;
            width: 100%;
            box-sizing: border-box;
            padding: 5px;
            background-color: #fff;
            .toolbar{
                display: flex;
                justify-content: space-between;
                align-items: center;

                .btnBack{
                    width: 36px;;
                    height: 36px;
                    line-height: 36px;
                    text-align: center;
                    border-radius: 5px; 
                }
                .btnBack:active{
                    box-shadow: 0 0 2px 0 #dcdfe6;
                    background-color: #dcdfe6;
                }

                .title{
                    font-weight: bold;
                }

            }
        }

        .body{
            padding: 15px;
            padding-top: 60px;
            .real{
                margin-bottom: 15px;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
                .item{
                    padding: 10px;
                    .value{
                        font-weight: bold;
                        margin-bottom: 5px;
                        .warn{
                            padding: 5px;
                            border-radius: 3px;
                            color: #fff;
                        }
                        .warn.ws0{
                            background-color: #088d0f;
                        }
                        .warn.ws1{
                            background-color: #8b0845;
                        }
                    }
                    .lab{
                        color: #797979;
                        font-size: 0.85em;;
                    }
                }
            }

            .filter{
                margin-bottom: 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .cate{
                    display: flex; 
                    align-items: center;

                    ul.lstCate{
                        font-size: 0.85em;
                        display: flex;
                        align-items: center;
                        border:1px solid #dcdfe6;
                        border-radius: 5px;
                        li{
                            padding: 5px; 
                        }
                        li:first-child{
                            border-radius: 5px 0 0 5px ;
                        }
                        li:last-child{
                            border-radius: 0 5px 5px 0 ;
                        }
                        li.active{
                            background-color: #fff;
                        }
                    }
                }
                .date{
                    display: flex; 
                    align-items: center;
                    .btnnav{
                        width:30px;
                        height:30px;
                        line-height:30px;
                        text-align: center;
                    }
                    .btnnav:active{
                        color: #0077fe;
                        background-color: #fff;
                    }
                }
            }

            .chart{
                height: 300px;
                background-color: #fff;
                box-shadow: 0 0 2px 0 #dcdfe6;
                margin-bottom: 15px;
            }

            .tab{
                min-height: 300px;
                background-color: #fff;
                box-shadow: 0 0 2px 0 #dcdfe6;
                margin-bottom: 15px;
            }

            table.dataTable{
                border-collapse: collapse;
                tr{
                    th{
                        background-color: #f2f3f9;
                        height: 40px;
                        line-height: 40px;
                        font-weight: bold;
                    }
                }

                tbody{
                    tr{
                        td{ height: 36px ;line-height: 36px; border-bottom: 1px solid #eee;}
                    }
                }
            }
        }
    }
</style>